<template>
	<div class="gallery" @click="handleClick">
		<div class="wrap">
			<swiper :options="swiperOption">
			   <swiper-slide
			   v-for="(item,index) in imgs"
			   :key="index">
				   <img :src="item" class="gallery-img">
			   </swiper-slide>
			   <div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Gallery',
	data () {
		return {
			swiperOption: {
				loop : true,
				autoplay : false,
				pagination : '.swiper-pagination',
				paginationType : 'fraction',
				observer: true,
				observeParents: true
			},
			galleryShow:false
		}
	},
	props: {
		imgs : Array
	},
	methods: {
		handleClick () {
			this.$emit('close')
		}
	}
}
</script>

<style lang="stylus" scoped>
	.gallery >>> .swiper-container
		overflow inherit
	.gallery
		display flex
		flex-direction column
		justify-content center
		position absolute
		top 0
		right 0
		bottom 0
		left 0
		background #000
		z-index 2
		.wrap
			height 0
			width 100%
			padding-bottom 63.5%
			background #fff
			.gallery-img
				width 100%
			.swiper-pagination
				color #fff
				margin-bottom -1.2rem
				overflow inherit
</style>
